<template>
  <el-card>
    <h3>体检登记</h3>
    <el-form :inline="true" style="margin-bottom: 16px">
      <el-form-item label="姓名">
        <el-input v-model="person.name" placeholder="请输入姓名" style="width: 120px" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="person.gender" placeholder="请选择" style="width: 100px">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="person.age" placeholder="年龄" style="width: 80px" />
      </el-form-item>
      <el-form-item label="体检编号">
        <el-input v-model="person.examNo" placeholder="自动生成或输入" style="width: 160px" />
      </el-form-item>
    </el-form>
    <div style="display: flex; gap: 32px; align-items: flex-start;">
      <!-- 左侧：体检项目选择 -->
      <div style="flex: 1;">
        <el-input v-model="search" placeholder="搜索体检项目" size="small" style="margin-bottom: 8px;" />
        <el-table :data="filteredItems" height="320" style="width: 100%">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="price" label="价格" />
        </el-table>
        <el-button type="primary" size="small" style="margin-top: 8px;" @click="addSelected">添加到已选</el-button>
      </div>
      <!-- 右侧：已选项目 -->
      <div style="flex: 1;">
        <h4>已选项目</h4>
        <el-table :data="selectedItems" height="320" style="width: 100%">
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="price" label="价格" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="removeItem(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 8px; text-align: right; font-weight: bold;">总价：￥{{ totalPrice }}</div>
      </div>
    </div>
    <div style="margin-top: 16px; text-align: right;">
      <el-button type="primary" @click="showDialog = true">体检登记</el-button>
    </div>
    <el-dialog title="体检登记汇总" :visible.sync="showDialog" width="400px">
      <div>
        <p>姓名：{{ person.name }}</p>
        <p>性别：{{ person.gender }}</p>
        <p>年龄：{{ person.age }}</p>
        <p>体检编号：{{ person.examNo }}</p>
        <p>已选项目：</p>
        <ul>
          <li v-for="item in selectedItems" :key="item.name">{{ item.name }}（￥{{ item.price }}）</li>
        </ul>
        <p style="font-weight:bold;">总价：￥{{ totalPrice }}</p>
      </div>
      <div slot="footer">
        <el-button @click="showDialog = false">关闭</el-button>
        <el-button type="primary" @click="submit">确认登记</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "Tjdj",
  data() {
    return {
      person: {
        name: '',
        gender: '',
        age: '',
        examNo: '',
      },
      items: [
        { name: '血常规', price: 20 },
        { name: '尿常规', price: 15 },
        { name: '肝功能', price: 50 },
        { name: '心电图', price: 30 },
        { name: 'B超', price: 60 },
        { name: '胸片', price: 80 },
      ],
      search: '',
      selectedRowKeys: [],
      selectedItems: [],
      showDialog: false,
    };
  },
  computed: {
    filteredItems() {
      if (!this.search) return this.items;
      return this.items.filter(item => item.name.includes(this.search));
    },
    totalPrice() {
      return this.selectedItems.reduce((sum, item) => sum + Number(item.price), 0);
    },
  },
  methods: {
    addSelected() {
      // 获取表格已勾选项
      const table = this.$refs.itemTable;
      const selection = (table && table.selection) || [];
      // 兼容：如果 selection 为空，则用 selectedRowKeys
      const toAdd = selection.length ? selection : this.selectedRowKeys;
      toAdd.forEach(item => {
        if (!this.selectedItems.find(i => i.name === item.name)) {
          this.selectedItems.push(item);
        }
      });
    },
    removeItem(idx) {
      this.selectedItems.splice(idx, 1);
    },
    submit() {
      this.$message.success('登记成功（模拟）');
      this.showDialog = false;
    },
  },
};
</script> 